import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Image, 
  Animated,
  Easing,
} from 'react-native';

import {createBottomTabNavigator, createAppContainer,createStackNavigator } from 'react-navigation';
import { Provider, connect } from 'react-redux';
import { createStore, combineReducers} from 'redux';
import reducers from './src/reducers'
function counter(state, action) {
  if (typeof state === 'undefined') {
    return 0;
  }

  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
}

//let store = createStore(reducers, combineReducers);
let store = createStore(combineReducers({ count: counter }));
import Home from './src/screen/Home'
import TypeList from './src/screen/Home/TypeList'
import TypeSelect from './src/screen/Home/TypeSelect'
import Login from './src/screen/Login2'
import Welcome from './src/screen/Welcome'
import Register from './src/screen/Register'
import Template from './src/screen/Templ'
import MineCenter from './src/screen/MineCenter'
import PersCenter from './src/screen/MineCenter/PersCenter'
import VipCenter from './src/screen/MineCenter/VipCenter'
import VipPay from './src/screen/MineCenter/VipPay'
import VipCard from './src/screen/MineCenter/VipCard'
import VipPrivilege from './src/screen/MineCenter/VipPrivilege'
import NickName from './src/screen/MineCenter/NickName'
import Phone from './src/screen/MineCenter/Phone'
import ChangePwd from './src/screen/MineCenter/ChangePwd'
import VipAgreement from './src/screen/MineCenter/VipAgreement'
import UseGuide from './src/screen/MineCenter/UseGuide'
import Setting from './src/screen/MineCenter/Setting'
import AboutUs from './src/screen/MineCenter/AboutUs' 
import NewhandGuide from './src/screen/MineCenter/NewhandGuide'
import Detail from './src/screen/Home/Detail'
import TempDetail from './src/screen/Templ/TempDetail'
import TempEdit from './src/screen/Templ/TempEdit'
import TempMusic from './src/screen/Templ/TempMusic'
import TempView from './src/screen/Templ/TempView'
import SelectLens from './src/screen/Templ/SelectLens'
import SelectImage from './src/screen/Templ/SelectImage'
import Compound from './src/screen/Templ/Compound'
import PlayerVideo from './src/screen/Templ/PlayerVideo'
import Test from './src/screen/Templ/Test'
import FeedBack from './src/screen/MineCenter/FeedBack';
import AccountSafe from './src/screen/MineCenter/AccountSafe';
import CreateTemp from './src/screen/Templ/CreateTemp';
import TempScan from './src/screen/Templ/TempScan';

const navOptions = {
  headerStyle:{
    //marginTop:20,
    backgroundColor:'white',//'#005DFF',
    height:44,
    fontWeight:'bold',
  },
  headerTitleStyle:{
    color:'#333',
    fontSize:18,
    textAlign:'center',
    flex:1,
    fontWeight:'normal',
  },
  //headerLeft:(<LeftButton/>)
}
//转场动画配置
const transitionConfig = {
  //screenInterpolator: StackViewStyleInterpolator.forHorizontal,
  transitionSpec: {
    duration: 300,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
  },
  screenInterpolator: sceneProps => {
    const { layout, position, scene } = sceneProps;
    const { index } = scene;

    const height = layout.initHeight;
    const width = layout.initWidth;
    const translateY = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [height, 0, 0],
    });
    const translateX = position.interpolate({
      inputRange: [index - 1, index, index + 1],
      outputRange: [width, 0, 0],
    });

    const opacity = position.interpolate({
      inputRange: [index - 1, index - 0.99, index],
      outputRange: [0, 1, 1],
    });

    return { opacity, transform: [{ translateX }] };
  },
}
//let HomeContainer = connect(state => ({ user: state.user }))(Home);
let LoginContainer = connect(state => ({user: state.user}))(Login)
const HomeStack = createStackNavigator(
  { 
    welcome:Welcome,
    home: Home,
    login: LoginContainer,
    register: Register,
    detail: Detail,
    typeList: TypeList,
    typeSelect: TypeSelect,
    tempDetail: TempDetail,
    tempEdit: TempEdit,
    tempMusic: TempMusic,
    tempView: TempView,
    playerVideo: PlayerVideo,
    selectLens: SelectLens,
		selectImage: SelectImage,
		vipPay:VipPay,
		compound:Compound
  },
  {
    transitionConfig:()=>(transitionConfig),
    defaultNavigationOptions:navOptions
  }
);
HomeStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = false;
  //console.log('nav-',navigation);
  // if (navigation.state.index == 0 || navigation.state.index > 1) {
  //   tabBarVisible = false;
  // }
  let routes = navigation.state.routes;
  // if(routes[routes.length-1].routeName == 'register' || routes[routes.length-1].routeName == 'login'){
  //   tabBarVisible = false;
  // }
  if(routes[routes.length-1].routeName == 'home'){
    tabBarVisible = true;
  }
  return {
    tabBarVisible,
  };
};
const TemplateStack = createStackNavigator(
  { 
    Template, 
    tempDetail: TempDetail,
    //login: Login,
    tempEdit: TempEdit,
    tempMusic: TempMusic,
    tempView: TempView,
    playerVideo: PlayerVideo,
    selectLens: SelectLens,
    selectImage: SelectImage,
		test: Test,
		vipPay:VipPay,
		compound:Compound,
		createTemp:CreateTemp
  },
  {
    defaultNavigationOptions:navOptions
  }
);
TemplateStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
const MineCenterStack = createStackNavigator(
  { 
    MineCenter,
    persCenter: PersCenter,
    nickName: NickName,
    phone: Phone,
    changePwd:ChangePwd,
    tempEdit: TempEdit,
    tempMusic: TempMusic,
    tempView: TempView,
    selectLens: SelectLens,
    selectImage: SelectImage,
    vipCenter:VipCenter,
    vipPay:VipPay,
    vipCard:VipCard,
    setting:Setting,
    feedBack: FeedBack,
		accountSafe: AccountSafe,
		compound:Compound,
		tempDetail:TempDetail,
		playerVideo:PlayerVideo,
		tempScan:TempScan,
		vipAgreement: VipAgreement,
    vipPrivilege: VipPrivilege,
    aboutUs: AboutUs,
    newhandGuide: NewhandGuide,
    useGuide: UseGuide
    //login: Login,
  },
  {
    transitionConfig:()=>(transitionConfig),
    defaultNavigationOptions:navOptions
  },
  {
    defaultNavigationOptions:navOptions
  }
);
MineCenterStack.navigationOptions = ({ navigation }) => {
  let tabBarVisible = true;
  if (navigation.state.index > 0) {
    tabBarVisible = false;
  }
  return {
    tabBarVisible,
  };
};
const TabNavigator = createBottomTabNavigator(
  {
    Home:HomeStack,
    Temp:TemplateStack,
    Mine:MineCenterStack,
  },
  {
		lazy:true,
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        //alert(routeName)
        let iconName;
        if (routeName === 'Home') {
          //iconName = `ios-information-circle${focused ? '' : '-outline'}`;
          iconName = focused ? require('./src/images/icon_app_sel.png') : require('./src/images/icon_app_nor.png');
        } else if (routeName === 'Temp') {
          iconName = focused ? require('./src/images/icon_file_sel.png') : require('./src/images/icon_file_nor.png');
        } else if (routeName === 'Mine') {
          iconName = focused ? require('./src/images/icon_user_sel.png') : require('./src/images/icon_user_nor.png');
        }
        return <Image style={styles.tabIcon} source={iconName}/>;
      },
      tabBarLabel:({focused})=>{
        const { routeName } = navigation.state;
        var textColor = focused ? "#00bfff" : "#999";

        let title = "";
        if (routeName === 'Home') {
          title = "首页";
        } else if (routeName === 'Temp') {
          title = "创建模板";
        } else if (routeName === 'Mine') {
          title = "个人中心";
        }
        return <View style={styles.tabTextView}><Text style={{fontSize:13,color:textColor}}>{title}</Text></View>
      }
    }),
    tabBarOptions: {
      activeTintColor: '#ED5100',
      inactiveTintColor: '#aaa',
    },
   
  }
);
//export default createAppContainer(TabNavigator);
let Navigation = createAppContainer(TabNavigator);
export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation />
      </Provider>
    );
  }
}
const styles = StyleSheet.create({
  tabTextView:{
    justifyContent:'center',
    alignItems:'center',
  },
  tabIcon:{
    width:24,
    height:24,
    resizeMode:'contain'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
